<template>
	<view class="page container">
		<uni-card :is-shadow="false" is-full>
			<text class="uni-h6">可以同时选择日期和时间的选择器</text>
		</uni-card>
		<uni-section :title="'日期用法：' + dateString" type="line"></uni-section>
		<view class="example-body">
			<uni-datetime-picker type="date" :clear-icon="false" v-model="dateString" @maskClick="maskClick" @change="saveSelectedDate" />
		</view>
		<view class="example-body">
			<text>已保存的日期值：{{ databb }}</text>
		</view>
    <uni-button @click="submit">提交</uni-button> <!-- 新增提交按钮 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				databb:'',
				dateString: this.getDateTime(new Date()),
				datetimeString: this.getDateTime(new Date(), false),
				datetimeDefaultValueString: '',
				datetimeDefaultValue: this.getDateTime(Date.now() + 1 * 24 * 3600000),
				dateTimestamp: Date.now(),
				dateInstance: new Date(),
				dateRange: [this.getDate(Date.now() - 5 * 24 * 3600000), this.getDate(Date.now() + 5 * 24 * 3600000)],
				datetimeRange: [this.getDateTime(Date.now() - 5 * 24 * 3600000), this.getDateTime(Date.now() + 5 * 24 * 3600000)],
				start: Date.now() - 10 * 24 * 3600000,
				end: Date.now() + 10 * 24 * 3600000
			}
		},
		watch: {
			datetimeString() {
				console.log('日期时间单选:', this.datetimeString);
			},
			dateRange() {
				console.log('日期范围选:', this.dateRange);
			},
			datetimeRange() {
				console.log('日期时间范围选:', this.datetimeRange);
			}
		},
		methods: {
			change(e) {
				console.log('----change事件:', e);
			},
			maskClick() {
				console.log('----maskClick事件');
			},
			getDateTime(date, addZero = true){
				return `${this.getDate(date, addZero)} ${this.getTime(date, addZero)}`
			},
			getDate(date, addZero = true){
				date = new Date(date)
				const year = date.getFullYear()
				const month = date.getMonth()+1
				const day = date.getDate()
				return `${year}-${addZero ? this.addZero(month) : month}-${addZero ? this.addZero(day) : day}`
			},
			getTime(date, addZero = true){
				date = new Date(date)
				const hour = date.getHours()
				const minute = date.getMinutes()
				const second = date.getSeconds()
				return this.hideSecond ?
				`${addZero ? this.addZero(hour) : hour}:${addZero ? this.addZero(minute) : minute}` :
				`${addZero ? this.addZero(hour) : hour}:${addZero ? this.addZero(minute) : minute}:${addZero ? this.addZero(second) : second}`
			},
			addZero(num) {
				if (num < 10) {
					num = `0${num}`
				}
				return num
			},
			saveSelectedDate() {
				this.databb = this.dateString; // 将选中的日期值保存到databb变量中
				console.log('选中的日期值:', this.dateString);
			},
      submit() {
        console.log('保存的日期值:', this.databb); // 在提交按钮点击时打印保存的日期值
      }
		}
	}
</script>

<style lang="scss">
	.example-body {
		background-color: #fff;
		padding: 10px;
	}
</style>
